<template>
    <div class="header">
        <!-- 搜索栏 -->
        <div class="search">
            <van-search clearable v-model="keyword" shape="round" class="input" focus="true" ref="searchFocus" maxlength='6'
                @input="changeHandler(keyword)" @clear="clearHandler()" @search="routerChange(keyword)" />
        </div>
        <router-link to="/">
            <div class="btn">取消</div>
        </router-link>

    </div>
    <!-- tab  -->
    <div class="tab">
        <van-tabs v-model:active="active" swipeable color="#f06742" line-width="20px" line-height="3px"
            @click-tab="handler">
            <!-- 全部 -->
            <van-tab v-for="(item, index) in classifyArr" :key="item.categoryId" :title="item.categoryName">
            </van-tab>
        </van-tabs>
    </div>

    <!-- 关键字列表 -->
    <div class="keyword" v-if="!value">
        <div class="keywordItem" v-for="(item, index) in KeyWordArr" :key="index">
            <div class="keywordItemNum"
                :class="{ active1: index == 0, active2: index == 1, active3: index == 2, active4: index > 2 }">{{
                    index + 1 }}</div>
            <div class="keywordItemName">{{ item.word }}</div>
            <div class="keywordItemMark up" v-if="item.shift == 1">⬆</div>
            <div class="keywordItemMark " v-if="item.shift == 0">—</div>
            <div class="keywordItemMark down" v-if="item.shift == -1">⬇</div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { ref, onMounted, watch } from 'vue'
import hotApi from '@/api/search'
import { useRoute, useRouter } from 'vue-router'

// 关键字
const keyword = ref<any>('')
// input
const changeHandler = ref<any>('')
//clear 清除关键字
const clearHandler = ref<any>('')
// 搜索关键字
const routerChange = ref<any>('')
// v-model:active 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
const active = ref<any>([])
// 搜索框相关
const value = ref('');


const route = useRoute()
const router = useRouter()
const categoryId = ref<number>(6)
const size = ref<number>(20)
const ttt = ref<any>([])



const classifyArr = ref<any>([])
const KeyWordArr = ref<any>([])

const getHotList = async () => {
    const result = await hotApi.reqHotList()
    // console.log(result);
    classifyArr.value = result.category;
}

const getKeyWord = async () => {
    const result = await hotApi.reqKeyWord(categoryId.value, size.value)
    console.log('222', result);
    KeyWordArr.value = result.hotWordResultList
}

const handler = async (index: any) => {
    console.log("1111", index); 4
    categoryId.value = index.name;
    getKeyWord()
}




onMounted(() => {
    getHotList();
    getKeyWord()

})




</script>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    width: 100%;


    .search {
        width: 86%;
        height: 40px;
    }

    .btn {
        font-size: 16px;
        margin-top: 10px;


    }
}

.keyword {
    width: 328px;
    padding-left: 27px;
    padding-right: 15px;

    .keywordItem {
        width: 328px;
        height: 45px;
        display: flex;

        .keywordItemNum {
            width: 20px;
            height: 45px;
            line-height: 45px;

        }

        .active1 {
            color: red;
            font-size: 20px;
            font-weight: 500;
        }

        .active2 {
            color: orangered;
            font-size: 20px;
            font-weight: 500;
        }

        .active3 {
            color: orange;
            font-weight: 500;
            font-size: 20px;
        }

        .active4 {
            font-size: 14px;
            color: #FFA07A;
        }

        .keywordItemName {
            width: 288px;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 12px;

        }

        .keywordItemMark {
            width: 10rpx;
            height: 45rpx;
            line-height: 45px;
            font-size: 14px;
            text-align: center;
            font-weight: 900;
        }

        .up {
            color: green;
        }

        .down {
            color: red;
        }
    }
}
</style >